<!-- 微博输入框 -->
<div class="margin-bottom-10 padding-bottom-10 border-bottom">
    <textarea class="form-control" id="text-content" rows="3"></textarea>
    <div class="margin-top-10">
        <button class="btn btn-primary" id="btn-submit">发表</button>
        &nbsp;
        <a href="#" id="btn-add-img">
            <i class="fa fa-picture-o"></i>
            插入一张图片
        </a>
        <input type="file" accept="image/*" id="file-picture" style="display: none;">
        <input type="hidden" id="input-img-url">
        &nbsp;
        <span id="span-img-name"></span>
    </div>
</div>

<script>
$(function () {
    var $spanImgName = $('#span-img-name')
    var $inputImgUrl = $('#input-img-url')
    var $textContent = $('#text-content')
    var $filePicture = $('#file-picture')

    // 上传图片
    $filePicture.change(function (e) {
        var file = $filePicture[0].files[0]
        $spanImgName.text(file.name)
        ajax.upload('/api/utils/upload', file, function(err, data) {
            if (err) {
                alert(err)
                return
            }
            // 成功
            $inputImgUrl.val(data.url)
        })
    })

    // 插入图片
    $('#btn-add-img').click(function (e) {
        e.preventDefault()
        //  开始选择图片
        $filePicture.click()
    })

    // 发布微博
    $('#btn-submit').click(function () {
        var content = $textContent.val().trim()
        var imgUrl = $inputImgUrl.val() || ''

        // 验证
        if (content.length === 0) {
            alert('请输入微博内容')
            return
        }

        // 发布
        ajax.post('/api/blog/create', {
            content: content,
            image: imgUrl
        }, function (err) {
            if (err) {
                // 失败
                alert(err)
                return
            }
            // 成功
            $filePicture.val('')
            $spanImgName.text('')
            $textContent.val('')
            $inputImgUrl.val('')

            // 刷新页面
            location.href = location.pathname
        })
    })

    // @ 功能
    $textContent.atwho({
        at: '@',
        data: '/api/user/getAtList'
        // data: ['Peter', 'Tom', 'Anne']
    })
})
</script>